<template>
      <div class="seller" ref="seller">
         <div class="seller-content">
            <div class="s-overview">
               <h1 class="title">{{seller.name}}</h1>
               <div class="desc">
                  <star :size="36" :score="seller.score"></star>
                  <span class="text">({{seller.ratingCount}})</span>
                  <span class="text">月售{{seller.sellCount}}单</span>
               </div>
               <div class="remark">
                  <li class="block">
                     <h2>起送价</h2>
                     <div class="content">
                        <span class="stress">{{seller.minPrice}}</span>元
                     </div>
                  </li>
                  <li class="block">
                     <h2>配送需求</h2>
                     <div class="content">
                        <span class="stress">{{seller.deliveryPrice}}</span>元
                     </div>
                  </li>
                   <li class="block">
                     <h2>平均配送时间</h2>
                     <div class="content">
                        <span class="stress">{{seller.deliveryTime}}</span>分钟
                     </div>
                  </li>
              
               </div>
               <div class="favorite">
                  <span class="icon-favorite" :class="{'active':favorite}" @click="toggleFavorite"></span>
                  <span class="text">{{favoriteText}}</span>
               </div>
            </div>
            <split></split>
            <div class="bulletin">
               <h1 class="title">公告与活动</h1>
               <div class="content-wrapper">
                  <div class="content">{{seller.bulletin}}</div>
               </div>
            </div>
            <ul v-if="seller.supports" class="supports">
               <li class="support-item" v-for="(item, index) in seller.supports" :key="index">
                     <span class="icon" :class="classMap[seller.supports[index].type]"></span>
                     <span class="text">{{seller.supports[index].description}}</span>
               </li>
            </ul>
            <split></split>
            <div class="pics">
               <h1 class="title">商家实景</h1>
               <div class="pic-wrapper" ref="picWrapper">
                  <div class="pic-list" ref="picList">
                     <li v-for="(pic, index) in seller.pics" :key=index class="pic-item">
                        <img :src="pic" alt="" width="120" height="90">
                     </li>
                  </div>
               </div>
            </div>
            <split></split>
            <div class="info">
               <h1 class="title">商家信息</h1>
               <ul>
                  <li class="info-item" v-for="(info, index) in seller.infos" :key="index">{{info}}</li>
               </ul>
            </div>
         </div>
      </div>
</template>
<script>
import star from '../star/star'
import split from '../split/split'
import BScroll from 'better-scroll'
import {saveTolocal, loadFromLocal} from '../../common/js/store'

export default {
   props: {
      seller: {
         type: Object
      }
   },
   data(){
      return{
         favorite: (() => {
            return loadFromLocal(this.seller.id, 'favorite', false)
         })()
      } 
   },
   components: {
      star,
      split
   },
   computed:{
      favoriteText(){
         return this.favorite? '已收藏': '收藏'
      }
   },
    created(){
        this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']
    },
    watch:{
       'seller'(){
          this._initScroll()
          this._initPics()
       }
    },
    mounted(){
       this._initScroll()
       this._initPics()
},
    methods: {
       toggleFavorite(){
          this.favorite = !this.favorite
          saveTolocal(this.seller.id, 'favorite', this.favorite)
       },
       _initScroll(){
          if(!this.scroll){
             this.scroll = new BScroll(this.$refs.seller, {
                click: true
             })
          }else{
             this.$nextTick(() => {
            this.scroll.refresh()
        })
          }
       },
       _initPics(){
          if(this.seller.pics){
             let picWidth = 120
             let margin = 6
             let width = (picWidth + margin) * this.seller.pics.length - margin
             this.$refs.picList.style.width = width + 'px'
             this.$nextTick(() => {
                if(!this.picScroll){
                   this.picScroll = new BScroll(this.$refs.picWrapper,
                   {
                      scrollX: true,
                      eventPassthrough: 'vertical'
                   });
                }else{
                   this.picScroll.refresh()
                }
             })
          }
          
       }
    }
}
</script>
<style lang="stylus" rel="stylesheet/styles">
@import "../../common/stylus/mixin"
   .seller
      position absolute
      top 174px
      bottom 0
      left 0
      width 100%
      overflow hidden
      .s-overview
      position relative
         padding 18px
         .title
            margin-bottom 8px
            line-height 14px
            font-size 14px
         .desc
            padding-bottom 18px
            line-height 18px
            font-size 0
            .star
               display inline-block
               margin-right 8px
               vertical-align top
            .text
               display inline-block
               vertical-align top
               font-size 10px
               color rgb(77, 85, 93)
               margin-left 12px
         .favorite
            position absolute
            right 18px
            top 18px
            text-align center
            width 40px
            .icon-favorite
               display block
               margin-bottom 4px
               line-height 24px
               font-size 24px
               color #d4d6d9
               &.active
                  color rgb(240, 20, 20)
            .text
               font-size 10px
               line-height 10px
               color rgb(77, 85, 93)
         .remark
            display flex
            padding-top 18px
            .block
               flex  1
              
               text-align center
               border-right 1px solid rgba(7, 17, 27, 0.1)
               &.last-child
                  border none 
               h2
                  margin-bottom 4px
                  line-height 10px
                  font-size 10px
                  color rgb(147, 153, 159)
               .content
                  line-height 24px
                  font-size 10px
                  color rgb(7, 17, 27)
                  .stress
                     font-size 24px
      .bulletin
         padding 18px 18px 0 18px 
         .title
            margin-bottom 8px
            line-height 14px
            color rgb(7, 17, 27)
            font-size 14px
         .content-wrapper
            padding 0 12px 16px 12px
            .content
               line-height 24px
               font-size 12px
               color rgb(240, 20, 20) 
      .supports
         .support-item
            padding 16px 25px
            font-size 0
         .icon
            display inline-block
            width 16px
            height 16px
            vertical-align top 
            margin-right 6px
            background-size 16px 16px
            background-repeat no-repeat
            &.decrease
               bg-image('decrease_4')
            &.discount
               bg-image('discount_4')
            &.guarantee
               bg-image('guarantee_4')
            &.invoice
               bg-image("invoice_4")
            &.special
               bg-image("special_4")
            &.decrease
               bg-image("decrease_4")
         .text
            line-height 16px
            font-size 12px
            color rgb(7, 17, 27)
      .pics
         padding 18px
         .title
            margin-bottom 12px
            line-height 14px
            color rgb(7, 17, 27)
            font-size 14px
         .pic-wrapper
            width 100%
            overflow hidden
            white-space nowrap
            .pic-list
               font-size 0
               .pic-item
                  display inline-block
                  margin-right 6px
                  width 120px
                  height 90px
                  &.last-child
                     margin 0

      .info
         padding 18px 18px 0 18px
         .title
            padding-bottom 12px
            line-height 14px
            color rgb(7, 17, 27)
            font-size 14px
         .info-item
            padding 16px 12px
            line-height 16px
            font-size 12px
            &.last-child
               border none 
</style>

